<template>
  <div style="height: 91vh;overflow: scroll">
    <!--导航-->
    <!--头部导航-->
    <van-sticky>
      <div style="width: 80%;margin-left: 50px">
        <van-tabs color="#1989fa" v-model="activeNav" @click="changeCategory">
          <van-tab class="cateContent" title="学术硕士">
            <div style="width: 200px" v-for="major in majorList" :key="major.id">
              <keep-alive>
                <router-link :to="{
              name:'OpenUniversity',
              params:{
                cateFlag:cateFlag,
                majorId:major.id
              }
            }">{{ major.name }}
                </router-link>
              </keep-alive>
              <van-divider/>
            </div>
          </van-tab>
          <van-tab class="cateContent" title="专业硕士">
            <div style="width: 200px" v-for="major in majorList" :key="major.id">
              <keep-alive>
                <router-link :to="{
              name:'OpenUniversity',
              params:{
                cateFlag:cateFlag,
                majorId:major.id
              }
            }">{{ major.name }}
                </router-link>
              </keep-alive>
              <van-divider/>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </van-sticky>
    <!--侧边导航栏-->
    <div style="display: inline-block;height: 91vh;overflow: scroll;position: fixed;top: 35px">
      <van-sidebar v-model="activeSider" @change="changeDepartment">
        <van-sidebar-item v-for="dept in departmentList" :key="dept.id" :title="dept.name"/>
      </van-sidebar>

    </div>

    <!--底部-->
    <Footer/>
  </div>
</template>

<script>

import Footer from "@/components/Footer";

export default {
  name: "Major",
  components: {Footer},
  data() {
    return {
      activeNav: 0,
      activeSider: 0,
      categoryId: '',
      majorList: [],
      acaDepartmentList: [],
      proDepartmentList: [],
      departmentList: [],
      cateFlag: 0, //0代表学硕，1代表专硕

    }
  },
  methods: {
    //改变学科
    changeDepartment(index) {
      if (this.cateFlag === 0) {
        //学硕下的学科
        this.majorList = this.departmentList[index].majorList
      } else {
        //专硕下的学科
        this.majorList = this.departmentList[index].majorList
      }
    },

    //改变分类
    changeCategory(index) {
      this.activeSider = 0
      this.departmentList = []
      if (index === 0) {
        this.queryAcaDept()
      } else {
        this.queryProDept()
      }
    },
    //查询学术硕士学科
    queryAcaDept(){
      this.request.get('/api/department/queryDepartmentListByCategoryId', {
        params: {
          categoryId: '77784b27f7bb4c01b3ad50f27232ba2f'
        }
      }).then(res => {
        if (res.code === 1) {
          localStorage.setItem('acaDepartmentList', JSON.stringify(res.data))
          res.data.map(v => {
            this.departmentList.push(v) //默认是学术硕士
          })
          const dept = this.departmentList[0]
          this.majorList = dept.majorList
          this.cateFlag = 0
        }
      })
    },
    //查询专业硕士学科
    queryProDept(){
      this.request.get('/api/department/queryDepartmentListByCategoryId', {
        params: {
          categoryId: '204416e08517478d9d5d68aafd329fbc'
        }
      }).then(res => {
        if (res.code === 1) {
          localStorage.setItem('proDepartmentList', JSON.stringify(res.data))
          res.data.map(v => this.departmentList.push(v))
          const dept = this.departmentList[0]
          this.majorList = dept.majorList
          this.cateFlag = 1
        }
      })
    }
  },
  created() {
    this.queryAcaDept()
  }
}
</script>

<style scoped>
.cateContent {
  width: 50%;
  margin-left: 55px;
  margin-top: 20px;
  display: inline-block;
}

.van-sidebar-item--select::before {
  background-color: #1989fa;
}
</style>